import React from 'react'
import PropTypes from 'prop-types'
import FormControl from '@material-ui/core/FormControl'
import Input from '@material-ui/core/Input'
import InputLabel from '@material-ui/core/InputLabel'

export default class UpdateUserProfile extends React.Component {
    static propTypes = {
        username: PropTypes.string,
        first_name: PropTypes.string,
        last_name: PropTypes.string,
        updateProfile: PropTypes.func.isRequired
    }    
    constructor(props){
        super(props)
        this.state = {
            username: this.props.username,
            first_name: this.props.first_name,
            last_name: this.props.last_name
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleSubmit() {
        this.props.updateProfile(this.state)
    }
    handleChange(event){
        this.setState({[event.target.name]: event.target.value})
    }
    render(){
        return (<form onSubmit = {this.handleSubmit}>
          <FormControl>
            <InputLabel htmlFor="user-name">username</InputLabel>
            <Input id="user-name" value={this.state.username} onChange={this.handleChange} />
          </FormControl>
          <FormControl>
            <InputLabel htmlFor="user-first-name">First Name</InputLabel>
            <Input id="user-first-name" value={this.state.first_name} onChange={this.handleChange} />
          </FormControl>
          <FormControl>
            <InputLabel htmlFor="user-last-name">Last Name</InputLabel>
            <Input id="user-last-name" value={this.state.last_name} onChange={this.handleChange} />
          </FormControl>
            <Input type="submit" value="Update"/>
        </form>)
    }
}